<template>
    <!-- 列表商品组件 -->
    <div class="commodity_list" @click="itemClick">
        <div class="list_top">
            <div class="list_top_img">
                <van-image radius="5"
                    :src="data?.productImages ? data?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
                <div class="list_top_img_tag" v-if="data?.hmMechanismsList[1]?.cooperationMode">多机制</div>
            </div>
            <div class="list_top_right">
                <div class="list_top_right_title">
                    <div class="title">{{ data?.styleName }}</div>
                    <div :class="`tag ${isTagClass(data?.stockStatus)}`">
                        {{ data?.stockStatus }}</div>
                </div>
                <div class="list_top_right_money">
                    <div class="money_left">
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'">
                            ￥<span>{{ data?.hmMechanismsList[0].price }}</span>
                        </div>
                        <div v-else>
                            ￥<span>{{ data?.hmMechanismsList[0].costPrice }}</span>
                        </div>
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'" class="commission">
                            <span class="fonts">佣</span>
                            <span class="numbers">
                                {{ data?.hmMechanismsList[0].commission }}%
                            </span>
                        </div>
                    </div>
                    <div class="money_right">
                        {{ data?.hmMechanismsList[0].liveStreamingMechanism }}
                    </div>
                </div>
                <div class="list_top_right_times">
                    到期时间：{{ data?.cycleTime || '-' }}
                </div>
                <div class="list_top_right_bottom">
                    <div class="inventory">
                        <span class="fonts font">待还品数</span>
                        <span class="numbers">{{ data?.outNum || 0 }}件</span>
                    </div>
                    <div class="button" v-if="data?.putStatus !== 1" @click.stop="notReturnClick">{{ data?.noPutStatus
                        ===
                        1 ? '修改说明' : '不还说明' }}</div>
                </div>
            </div>
        </div>
    </div>
    <van-popup v-model:show="showBottom" position="bottom" teleport="#app" closeable round :style="{ height: '450px' }">
        <div class="explain_popup">
            <div class="explain_popup_box">
                <div class="explain_popup_top">
                    <van-image class="explain_popup_top_img" radius="5" :src="data?.productImages" />
                    <span class="explain_popup_top_tag" v-if="data?.hmMechanismsList[1].cooperationMode">多机制</span>
                    <div class="explain_popup_top_right">
                        <div class="right_title">{{ data?.styleName }}</div>
                        <div class="right_text">出库时间：{{ data?.outTime }}</div>
                        <div class="right_tag">
                            <div class="right_tag_one">
                                <div class="right_tag_one_left">待还品数</div>
                                <div class="right_tag_one_right">{{ data?.outNum || 0 }}件</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="explain_popup_form numberInput">
                    <div class="label">还品数量</div>
                    <van-stepper v-model="notReturnValue" integer min="0" :max="data?.outNum || 0"
                        @change="notReturnChange" />
                </div>
                <div class="explain_popup_form">
                    <div class="label">不还数量</div>
                    <div class="value">{{ data?.outNum - Number(notReturnValue) }}件</div>
                </div>
                <div class="explain_popup_form" v-if="data?.outNum - Number(notReturnValue) === 0">
                    <div class="label"></div>
                    <div class="valuex">
                        <img class="valuex_img" :src="Buhuantanhao" alt="">
                        全部归还将清除此条不还说明
                    </div>
                </div>
                <div class="explain_popup_form">
                    <div class="label">说明</div>
                    <van-field style="flex: 0.8;background: #F6FAFF;" show-word-limit v-model="notReturnMessage"
                        rows="1" type="textarea" placeholder="请输入" maxlength="50" />
                </div>
            </div>

            <div class="explain_popup_button">
                <!-- <div class="button_box" @click="notReturnSubmit">提交</div> -->
                <van-button :loading="loading" loading-text="执行中..." class="buttons" @click="notReturnSubmit"
                    v-throttle:click>
                    提交
                </van-button>
            </div>
        </div>
    </van-popup>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { showToast } from 'vant';
import Buhuantanhao from '@/assets/home/buhuantanhao.png'
import { showFailToast } from "vant";
// api
import { submitNoRemark } from '@/api/operation/index'
const props = defineProps({ data: { type: Object, default: () => { } } })
const emit = defineEmits(['onRefresh', 'itemClick'])
const loading = ref(false)
const showBottom = ref(false)
const notReturnValue = ref<string>('0')
const notReturnMessage = ref('')
// 商品状态反显
const isTagClass = (status: string) => {
    if (status === '未归还') {
        return 'tag_lan'
    } else if (status === '超期未还') {
        return 'tag_red'
    } else if (status === '部分归还') {
        return 'tag_red'
    }
}
const notReturnChange = (val) => {
    if (Number(props?.data?.outNum - val) < 0) {
        notReturnValue.value = String(props?.data?.outNum)
    }
}
// 打开不还说明
const notReturnClick = () => {
    notReturnValue.value = props?.data.returnNum || 0
    notReturnMessage.value = props?.data.noPutRemark || ''
    showBottom.value = true
}
// 不还说明提交
const notReturnSubmit = async () => {
    loading.value = true
    try {
        if (Number(props?.data?.outNum - Number(notReturnValue.value))) {
            if (notReturnMessage.value) {
                await submitNoRemark({ id: props?.data?.id, remark: notReturnMessage.value, notReturnNum: props?.data?.outNum - Number(notReturnValue.value), returnNum: notReturnValue.value })
                showToast('提交完成')
                loading.value = false
                showBottom.value = false
                emit('onRefresh')
            } else {
                loading.value = false
                showToast('请填写不还说明！')
            }
        } else {
            await submitNoRemark({ id: props?.data?.id, remark: notReturnMessage.value, notReturnNum: props?.data?.outNum - Number(notReturnValue.value), returnNum: notReturnValue.value })
            showToast('提交完成')
            loading.value = false
            showBottom.value = false
            emit('onRefresh')
        }
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('提交失败');
        }
        loading.value = false
    }
}
const itemClick = () => {
    emit('itemClick')
}
</script>

<style lang="less" scoped>
@import url(@/views/operation/operationHomeList/components/style/index.less);

.explain_popup {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;

    .explain_popup_box {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-top: 20px;
        box-sizing: border-box;

        .explain_popup_top {
            width: 100%;
            display: flex;
            position: relative;

            .explain_popup_top_img {
                width: 120px;
                height: 120px;
                margin-right: 10px;
                border-radius: 5px;
            }


            .explain_popup_top_tag {
                position: absolute;
                top: 0;
                left: 0;
                width: 46px;
                height: 22px;
                line-height: 22px;
                text-align: center;
                background: #0094FF;
                border-radius: 5px 0px 5px 0px;
                border: 1px solid #0094FF;
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF;
            }

            .explain_popup_top_right {
                flex: 1;
                min-width: 0;

                .right_title {
                    margin-top: 10px;
                    margin-bottom: 47px;
                    font-weight: 500;
                    font-size: 16px;
                    color: #1A1B1C;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .right_text {
                    font-weight: 400;
                    font-size: 12px;
                    color: #8492AD;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-bottom: 10px;
                }

                .right_tag {
                    display: flex;
                    align-items: center;

                    .right_tag_one {
                        display: flex;
                        background: #EBF4FF;
                        border-radius: 2px;

                        .right_tag_one_left {
                            padding: 3px 5px;
                            background: #0094FF;
                            border-radius: 2px;
                            font-weight: 400;
                            font-size: 10px;
                            color: #FFFFFF;
                        }

                        .right_tag_one_right {
                            padding: 3px 5px;
                            font-weight: 500;
                            font-size: 10px;
                            color: #0094FF;
                        }
                    }
                }
            }
        }

        .explain_popup_form {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;

            .label {
                font-weight: 400;
                font-size: 16px;
                color: #1A1B1C;
            }

            .value {
                font-weight: 400;
                font-size: 16px;
                color: #FC2540;
            }

            .valuex {
                font-weight: 400;
                font-size: 12px;
                display: flex;
                align-items: center;

                .valuex_img {
                    width: 12px;
                    height: 12px;
                }
            }
        }
    }

    .explain_popup_button {
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;

        .buttons {
            width: 100%;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
        }

        .button_box {
            width: 100%;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            line-height: 44px;
            text-align: center;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}
</style>